<template>
  <div class="forum" @click="toLike($event)">
    <vue-seamless-scroll
      :data="listData"
      class="seamless-warp"
      :class-option="optionHover"
      ref="seamlessScroll"
      v-if="listData.length > 3"
    >
      <ul class="item">
        <li v-for="(item, index) in listData" :key="index" :index="index">
          <div class="title">
            <div class="left">
              <img
                :src="require('@/assets/imgs/avatar3.png')"
                alt=""
                class="talentImgUrl"
              /><span>{{ item.title }}</span>
            </div>
            <div
              class="zanBox"
              :data-obj="JSON.stringify(item)"
              :data-index="JSON.stringify(index)"
            >
              <i
                :class="[item.likeState == 1 ? 'zan' : 'noZan']"
                :data-obj="JSON.stringify(item)"
                :data-index="JSON.stringify(index)"
              ></i
              ><span class="nums">{{
                item.likesNum == 0 ? "赞" : item.likesNum
              }}</span>
            </div>
          </div>
          <div class="content">{{ item.date }}</div>
        </li>
      </ul>
    </vue-seamless-scroll>
    <div class="seamless-warp">
      <ul class="item" v-if="listData.length <= 3">
        <li v-for="(item, index) in listData" :key="index" :index="index">
          <div class="title">
            <div class="left">
              <img
                :src="require('@/assets/imgs/avatar3.png')"
                alt=""
                class="talentImgUrl"
              /><span>{{ item.title }}</span>
            </div>
            <!-- @click.stop阻止冒泡，里边加 -->
            <div class="zanBox" @click.stop="toLike($event, item, index)">
              <i :class="[item.likeState == 1 ? 'zan' : 'noZan']"></i
              ><span class="nums">{{
                item.likesNum == 0 ? "赞" : item.likesNum
              }}</span>
            </div>
          </div>
          <div class="content">{{ item.date }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
/*vue-seamless-scroll点击事件：
1、使用事件委托方式，在vue-seamless-scroll外边加点击事件用data-obj来获取里边值。里部无用
ios不识别e.path[1].dataset.obj，通用e.target.dataset.obj
2、点赞效果+1，-1 同步当前值在dom中展示渲染作累计实现双向绑定用:this.$set(obj, key, value);
3、问题：使用vue-seamless-scroll后会发现为前后轮播悬接效果多出来一个静态HTML代码且没有绑定DOM，当点赞时点不上，不会执行点击事件效果，
   解决： 加this.$refs.seamlessScroll.reset();
4、@click.stop阻止冒泡，里边加<div><span @click.stop = "fn">内部代码</span></div>
   
*/
import vueSeamlessScroll from "vue-seamless-scroll";
import "@/assets/js/praise.js";
export default {
  name: "vueScroll",
  data() {
    return {
      listData: [
        //   <!-- likeNum赞数，commentId -id,likeState 是否点赞 -->
        {
          title: "YJUI",
          date: "选择广发恒隆",
          likesNum: 21,
          likeState: 0,
        },
        {
          title: "ht_171816",
          date: "投票选择了 信达澳银匠心臻选两年持有期",
          likesNum: 0,
          likeState: 0,
        },
        {
          title: "1470392",
          date: "选010363信达",
          likesNum: 23,
          likeState: 0,
        },
        {
          title: "1467026",
          date: "投票选择了 信达澳银匠心臻选两年持有期",
          likesNum: 55,
          likeState: 1,
        },
        {
          title: "开学季",
          date: "投票选择了 华安逆向策略",
          likesNum: 66,
          likeState: 1,
        },
      ],
    };
  },
  components: {
    vueSeamlessScroll,
  },
  methods: {
    toLike(e, curItem, index) {
      let _this = this;

      let i = ""; //当前索引值
      let datas = "";
      if (this.listData.length > 3) {
        //多条轮播
        if (e.target.dataset.index != undefined) {
          // let index = JSON.parse(e.target.dataset.index);
          // i = index;
          i = e.target.dataset.index;
        }
      } else {
        //单条不轮播
        i = index;
      }
      console.log(typeof i, "index...");
      //1、知识点
      if (
        e.target.dataset.index != undefined ||
        e.target.dataset.index == "0" ||
        i ||
        i == "0"
      ) {
        datas = this.listData[i];
        //2、知识点
        this.$set(datas, "likes", datas.likesNum);
        if (datas.likeState == "1") {
          this.$set(datas, "likesNum", --datas.likesNum);
          this.$set(datas, "likeState", 0);
        } else {
          this.$set(datas, "likesNum", ++datas.likesNum);
          this.$set(datas, "likeState", 1);
          $.tipsBox({
            obj: $(e.target),
            str: "+1",
            callback: function () {},
          });
        }
        // 3、知识点:两个vueSeamlessScroll的overflow: hidden;悬接处有个静态HTML，数据不变用如下方法解决
        // this.$refs.seamlessScroll.reset();
        this.$refs.seamlessScroll ? this.$refs.seamlessScroll.reset() : "";
        // console.log(this.$refs.seamlessScroll);
      } else {
        console.log("0000");
      }
    },
  },

  computed: {
    optionHover() {
      return {
        step: 1, //数值越大速度滚动越快   3正
        limitMoveNum: 1, //开始无缝滚动的数据量  1正//this.fourDatata.length
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, //开启数据实时监控刷新dom  true正
        hoverStop: false, // 是否开启鼠标悬停stop
        openTouch: false, //false正
        singleHeight: 1.96, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        waitTime: 3000, // 单步运动停止的时间(默认值1000ms)
        isSingleRemUnit: true, //true正常,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.seamless-warp {
  overflow: hidden;
  width: 100%;
  min-height: 0;
  max-height: 5.87rem;
  background: #fff;
  .item {
    li {
      line-height: 0.4rem;
      padding: 0 0.3rem;
      margin-bottom: 0.3rem;
      height: 1.66rem;
      .title {
        display: flex;
        justify-content: space-between;
        display: flex;
        margin-left: auto;
        .left {
          display: flex;
        }
      }
    }
  }
}
.forum {
  width: 6.9rem;
  opacity: 1;
  background: #e2f8ff;
  border: 0.02rem solid #ffffff;
  border-radius: 0.2rem;
  max-height: 7.4rem;
  min-height: 0.93rem;
  // box-shadow: 0 0.08rem 0.16rem 0px rgb(42 80 104 / 7%);
  margin: 0 auto;
  margin-top: 0.3rem;
  padding: 0.3rem;
  padding-bottom: 0.3rem;
  padding-top: 0.38rem;
}
.content {
  margin-top: 0.09rem;
  height: 1.1rem;
  background: #f4f5f7;
  border-radius: 0.02rem 0.2rem 0.2rem 0.2rem;
  text-align: left;
  font-size: 0.28rem;
  line-height: 0.38rem;
  padding: 0.24rem 0.3rem;
  display: flex;
  align-items: center;

  .titlex {
    width: 100%;
  }
}
.talentImgUrl {
  width: 0.47rem;
  height: 0.47rem;
  display: block;
  margin-right: 0.1rem;
}
.zan {
  display: inline-block;
  width: 0.28rem;
  height: 0.24rem;
  background: url("../assets/imgs/zan.png");
  background-size: 100% 100%;
  margin-right: 3px;
}
.noZan {
  background: url("../assets/imgs/noZan.png");
  display: inline-block;
  background-size: 100% 100%;
  width: 0.28rem;
  height: 0.24rem;
  margin-right: 3px;
}
</style>
